<template>
  <div>
    <div class="cell-text">
      <el-link
        type="primary"
        @click="handleClick(row)"
        v-if="row.$action == 'modify'"
      >
        {{ getCheckboxValues(row) }}
      </el-link>
      <div v-else>
        {{ row?.sourceTypeValue }}
        <!-- <span style="font-size: 16px">{{
          row?.sourceTypeValue.split(":")[0]
        }}</span>
        :
        <span style="font-size: 14px">{{
          row?.sourceTypeValue.split(":")[1]
        }}</span> -->
      </div>
    </div>
    <el-dialog
      :title="label"
      :visible.sync="visible"
      v-if="visible"
      width="500px"
      :before-close="handleClose"
      center
      append-to-body
    >
      <div class="jydw-source-level__content" v-loading="loading">
        <slot>
          <el-select
            v-model="oneId"
            @change="change(oneId, 'one')"
            :placeholder="`请选择${label}`"
          >
            <el-option
              v-for="items in oneObjs"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            ></el-option>
          </el-select>
          <el-select
            v-model="twoId"
            :multiple="menuId"
            :collapse-tags="menuId"
            @change="change(twoId, 'two')"
            :placeholder="`请选择${label}`"
            v-if="twoObjs && twoObjs.length"
          >
            <el-option
              v-for="items in twoObjs"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            ></el-option>
          </el-select>
        </slot>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose(editRow)" :disabled="loading"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="handleConfirm(row)"
          :disabled="loading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { objectMerge } from "@/utils";
import columnData from "./data.json";
import columnMixin from "./mixin.js";

// let data ={
// "$action":"view",
// "$checkAll":false,
// "$checked":Array(0),
// "$isIndeterminate":false,
// "$sourceLevel":undefined,
// "$visible":false,
// "adminType":17,
// "areaCode":"150000000000",
// "areaName":"内蒙古自治区",
// "city":"",
// "cityOrgId":"",
// "cityOrgName":"",
// "country":"86",
// "county":"",
// "countyOrgId":"",
// "countyOrgName":"",
// "createdBy":"15622226661",
// "createdTime":1690302132000,
// "csAdminLevel":"Province",
// "id":"1133554831147925504",
// "job":"信息员",
// "menuId":"1000000010",
// "menuName":"救援队伍",
// "menuPermission":"1000000010::",
// "name":"王1",
// "orgId":"dp-d0435cf4f867411099ae69f9a97026a2",
// "orgName":"救援队伍1",
// "pageType":"",
// "phone":"13433333334",
// "province":"",
// "sourceLevel":undefined,
// "sourceType":"消防救援队",
// "status":1,
// "superiorOrg":"救援队伍",
// "updatedBy":"15622226661",
// "workUnit":"救援队伍1",
// }

const checkOptions = ["country", "province", "city", "county"];
export default {
  mixins: [columnMixin],
  props: {
    label: {
      type: [String],
      default: "",
    },
    showKey: {
      type: [String],
      default: "",
    },
    field: {
      type: [String],
      default: "",
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    content: {
      type: Object,
      default() {
        return {
          controller: null,
          props: {},
          columns: [],
        };
      },
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      labels: this.label,
      columnData,
      loading: false,
      oneObjs: [],
      twoObjs: [],
      oneId: "",
      twoId: [],
      visible: false,
      editRow: {},
      value: "",
    };
  },
  components: {},
  // watch: {
  //   oneId: function () {
  //     this.getOrgList(this.oneId);
  //   },
  // },
  mounted() {
    console.log("content", this.content);
  },
  computed: {
    menuId() {
      return this.getParameter("menuId") == '1000000010'  // 救援队伍
    },
  
    getCheckboxValues() {
      return function (row) {
        let sourceTypeValue = row?.sourceTypeValue;
        if (!sourceTypeValue) {
          return "请选择";
        }
        return sourceTypeValue;

        // let sourceType = row.sourceType
        // if (sourceType && sourceType?.length > 0) {
        //   let name1 =
        //     this.oneObjs?.filter((i) => i.id == sourceType?.[0])[0]?.[
        //       "name"
        //     ] || "";
        //   let name2 =
        //     this.twoObjs?.filter((i) => i.id == sourceType?.[1])[0]?.[
        //       "name"
        //     ] || "";
        //     if(!name1 && !name2) {
        //       return "请选择";
        //     }
        //   return name1 + " " + name2;
        // }
        // return "请选择";
      };
    },
  },
  
  methods: {
    getList() {
      // 获取市列表----------请求参数parId、 保存请求返回的list列表、 默认选择的select保存起来
      this.$api.OrgController.type(
        { body: { parId: this.getParameter("menuId") || "150000000000" } },
        (res) => {
          if (res.code == 0) {
            this.oneObjs = res.data;
            this.oneId = this.editRow?.sourceType?.[0];
            // this.editRow.sourceTypeValue = this.oneObjs?.filter((i) => i.id == this.oneId)[0]["name"]
          }
        }
      );
    },
    getOrgList(parId) {
      if (parId) {
        // 获取单位列表
        this.$api.OrgController.type({ body: { parId } }, (res) => {
          if (res.code == 0) {
            this.twoObjs = res.data;
          }
        });
      }
    },
    handleClick(row) {
      this.oneId = row?.sourceType[0];
      this.twoId = this.menuId ? row?.sourceType[1]?.split("::") : row?.sourceType[1];
      this.getList();
      if (this.oneId) {
        this.getOrgList(this.oneId);
      }
      if (!row.sourceType) {
        row.sourceType = [];
      }
      // if(row.sourceType)
      // else {
      //   row.sourceType = JSON.parse(row.sourceType)
      // }
      row.$sourceType = this.$lodash.cloneDeep(row.sourceType) || [];
      row.$sourceTypeValue = this.$lodash.cloneDeep(row.sourceTypeValue) || "";
      this.visible = true;
      this.editRow = row;
      console.log(row.name);
    },
    change(changeVal, type) {
      console.log(this.oneId);
      // 当前改变的值、当前编辑的行、当前row中的key、当前下拉框的list数组值
      // 选择下拉

      let selectName1 = "";
      let selectName2 = "";
      if (type == "one") {
        selectName1 = this.oneObjs?.filter((i) => i.id == changeVal)[0]["name"];
        this.editRow.sourceType[0] = changeVal;
        this.editRow.sourceType[1] = "";
        this.editRow.sourceTypeValue = selectName1;
        this.getOrgList(changeVal, "twoObj");
        this.twoId = this.menuId ? [] : "";
        this.twoObjs = [];
      }
      if (type == "two") {
        changeVal = typeof(changeVal) == "string" ? changeVal.split("::"): changeVal
        selectName2 = changeVal
          .map((item) => {
            return this.twoObjs?.filter((i) => i.id == item)[0]["name"];
          })
          ?.join("::");

        this.editRow.sourceType[1] = changeVal.join("::");
        this.editRow.sourceTypeValue =
          this.editRow?.sourceTypeValue.split("：")[0] + "：" + selectName2;
      }
    },
    handleConfirm(row) {
      if (this.row.sourceType.length <= 0) {
        this.editRow.sourceType[0] = this.oneId;
        this.editRow.sourceType[1] = this.twoId.join("::");
      }
      row = this.$lodash.cloneDeep(this.editRow);
      row.sourceType = this.editRow.sourceType;
      this.visible = false;
      console.log("this.editRow", this.editRow);
    },
    handleClose(row) {
      row = this.editRow;
      row.sourceType = row.$sourceType;
      row.sourceTypeValue = row.$sourceTypeValue;
      this.oneId = "";
      this.twoId = this.menuId ? [] : "";
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.jydw-source-level {
  &__content {
    color: #fff;
    .el-input__inner {
      min-width: 160px;
    }
    .el-select {
      margin-left: 5px;
      .el-select__tags > span {
        display: flex;
      }
    }
  }
}

.el-checkbox-group {
  div {
    margin: 3px 0;
  }
}
.tx-list-table .el-table .el-tooltip .cell-text {
  margin-bottom: 12px;
}
</style>
